<template>
  <div class="grid">
    <div class="grid-box-1">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>

    <div class="grid-box-2">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Grid',
  props: {},
  data () {
    return {}
  },
  computed: {},
  mounted () {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.grid {
  .grid-box-1 {
    border: 1px solid #999;
    width: 300px;
    height: 200px;
    display: grid;
    margin: 20px;
    grid-template-columns: 1fr 1fr 1fr; /* 指定 3 列*/
    grid-template-rows: 1fr 1fr; /* 指定 2行 */
  }

  .grid-box-1 > div {
    background-color: bisque;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  /* 隐式网格 */
  .grid-box-2 {
    border: 1px solid #999;
    width: 300px;
    height: 200px;
    display: grid;
    margin: 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;

    grid-auto-rows: 40px; /* 添加隐式网格的行高30px */
  }

  .grid-box-2 > div {
    background-color: bisque;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

}
</style>
